<template>
<client-only>
  <div class="main">
     <!-- 页面标题栏 -->
    <div class="title">
      <!-- 带class样式的是本页面的显示标题及跳转到自己页面 -->
      <nuxt-link  class="active" to="/login">登录</nuxt-link>
      <!-- <a class="active" href="">登录</a> -->
      <span>·</span>
       <!-- 别用a标签，太他吗卡了。。。 -->
      <nuxt-link to="/register">注册</nuxt-link>
      <!-- <a href="/register">注册</a> -->
    </div>
     
    <div class="sign-up-container">
      <!-- form表单 -->
      <el-form ref="userForm" :model="user">
          <!-- 手机号或者用户名 -->
        <el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
          <div >
            <el-input type="text" placeholder="手机号" v-model="user.mobile"/>
            <i class="iconfont icon-phone" />
          </div>
        </el-form-item>
          <!-- 密码栏 -->
        <el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="密码" v-model="user.password"/>
            <i class="iconfont icon-password"/>
          </div>
        </el-form-item>
     <!-- 表单提交 -->
        <div class="btn">
          <input type="button" class="sign-in-button" value="登录" @click="submitLoginUser()">
        </div>
      </el-form>
      <!-- 更多登录方式 -->
      <div class="more-sign">
        <h6>社交帐号登录</h6>
        <ul>
          <li><a id="weixin" class="weixin" target="_blank" href="http://localhost:8160/api/ucenter/wx/login"><i class="iconfont icon-weixin"/></a></li>
          <li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
        </ul>
      </div>
    </div>

  </div>
  </client-only>
</template>

<script>
  import '~/assets/css/sign.css'
  import '~/assets/css/iconfont.css'
  import cookie from 'js-cookie'
  import login from '@/api/login'
 //下面是自己写的一个关于cookie增删改查的工具类
import {setCookie,getCookie,delCookie }  from '@/utils/cookie'


  export default {
    layout: 'sign',

    data () {
      return {
        user:{
          mobile:'',
          password:''
        },
        loginInfo:{}
      }
    },



    methods: {
      //登录的方法
         submitLoginUser(){
            //第一步 调用接口进行登录，返回token字符串
           login.submitLogin(this.user)
           .then(response=>{
            //第二步 获取token字符串放到cookie里面
            //第一个参数cookie名称，第二个参数值，第三个参数作用范围
            cookie.set("guli_token",response.data.token,{domain: 'localhost'})   
            //第四步 调用接口 根据token获取用户信息，为了首页面显示 
            login.getLoginInfo()
              .then(response=>{
                this.$message({
                   type: 'success',
                   message: "登入成功！"
                        })
          console.log("response.data.item",response.data.item) 
           var cookiename = "guli_ucenter"
           var extime = "d1"
           setCookie(cookiename,response.data.item,extime)
           
          // this.setCookie("guli_ucenter",response.data.item,2)
             //注意 ！！！！！！！！！！！放入cookie里面的只能是字符串，如果是json对象就等于没放，取出来就报错！！！
                //  var StringJson = JSON.stringify(response.data.item)
               //获取返回用户信息，放到cookie里面            
                //  cookie.set('guli_ucenter',StringJson,{domain: 'localhost'})
                  //跳转到首页,这个是原生的javascript里面的写法，也可用rout路由  this.$router.push({path: '/login'})
                  // window.location.href = "/";
                        // this.$router.push({path: '/index'})
                        
                        this.$router.push({path:'/'})


              })
            

           })

         },
         	//设置cookie的时间和内容cookieName为名称，token为值，exdays为保存的日期 ，再浏览器看到的是世界时间TZ格式的
          setCookie1(cookieName, token, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                console.log("exdate",exdate)
          
                //转换成字符串，如果传过来ide是json对象无法存入cookie
                var Stringtoken = JSON.stringify(token)
                //字符串拼接cookie
                window.document.cookie = cookieName + "=" + Stringtoken + ";path=/;expires=" + exdate.toGMTString();

                // window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },

      // 检查手机号码格式
      checkPhone (rule, value, callback) {
        //debugger
        if (!(/^1[34578]\d{9}$/.test(value))) {
          return callback(new Error('手机号码格式不正确'))
        }
        return callback()
      }
    }
  }
</script>
<style>
   .el-form-item__error{
    z-index: 9999999;
  }
</style>